<template>
  <div class="article-list-container">
    <van-pull-refresh
      v-model="isreFreshLoading"
      :success-text="successText"
      :success-duration="1500"
      @refresh="onRefresh"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        @load="onLoad"
      >
        <!-- <van-cell v-for="(article, index) in list" :key="index" :title="article.title" /> -->
        <ArticleItem
           v-for="(article, index) in list"
           :key="index"
           :article="article"
        />
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
/*
  van-list组件中各属性的含义:
  1. load事件: 当list组件初次渲染时, 会触发一次, 当滚动条滚动到当前列表最下方时,也会主动触发,当触发load事件时,loading属性变为true,转化为加载中状态
  2. v-model的"loading"属性: 控制加载中的loading状态,当在非加载状态时,loading为false,此时可以通过滚动条的位置来判断是否触发load事件; 当loading为true时, 表示正在执行异步请求, 此时不会触发load事件
  3. finished: 每次请求完成后, 需要手动的将loading设置为false, 然后来判断当前接口或条件是否将列表数据获取完全, 如果获取完全后, 需要主动的将finnished属性改为true, 当finnished属性为true时, 将不会触发load事件
*/

/*
  问题: 发现每个不同的内容区域所记录的滚动位置是body的滚动位置,并不能独享记录
  解决方法: 不让body滚动, 而是让每个内容区域独立滚动,这样可以独享滚动条的位置
 */
import { getArticlesAPI } from '../../../api/index.js'
import ArticleItem from '../../../components/articleItem.vue'
export default {
  name: 'articleList',
  props: {
    channel: {
      type: Object,
      default: () => ({})
    }
  },
  components: {
    ArticleItem
  },
  data () {
    return {
      list: [], // 列表数据
      loading: false, // 控制加载中的loading状态
      finished: false, // 控制数据加载结束状态
      error: false, // 控制列表加载失败的提示状态
      timestamp: null, // 请求下一页的时间戳
      isreFreshLoading: false, // 控制下拉刷新的loading状态
      successText: '刷新成功' // 下拉刷新成功提示文本
    }
  },
  methods: {
    // 下拉刷新
    async onRefresh () {
      // 请求获取数据, 将数据放到列表的顶部, 请求完成之后关闭下拉刷新的loading状态
      try {
        const res = await getArticlesAPI({
          channel_id: this.channel.id,
          timestamp: Date.now() // 下拉刷新, 每次请求传入最新时间戳,获取最新数据
        })
        // 模拟随机失败的情况
        // if (Math.random() > 0.5) {
        //   JSON.parse('asdsd')
        // }
        this.list.unshift(...res.data.data.results)
        this.isreFreshLoading = false
        this.successText = `刷新成功, 更新了${res.data.data.results.length}条数据`
      } catch (error) {
        this.isreFreshLoading = false
        this.successText = '刷新失败'
      }
    },
    // 加载频道列表数据
    async onLoad () {
      // 当初始化或页面滚动到列表最底部或者请求回来的数据不足一屏的时候, 会自动的触发@load事件绑定的onLoad方法
      try {
        // 1. 异步更新数据 - 调用接口更新列表, 添加数组的后续元素
        const res = await getArticlesAPI({
          channel_id: this.channel.id,
          timestamp: this.timestamp || Date.now()
        })

        // 模拟随机失败的情况
        // if (Math.random() > 0.5) {
        //   JSON.parse('asdsd')
        // }
        console.log(this.channel.id)
        console.log(res.data.data.results)

        // 2. 把请求结果数据放到list数组中
        this.list.push(...res.data.data.results)
        // console.log(this.loading) // 主动触发load事件,loading值变为true

        // 3. 本次数据加载结束之后要把加载状态设置为结束, loading关闭以后才能触发下一次的加载更多
        this.loading = false

        // 4. 判断数据是否全部加载完成
        if (res.data.data.results.length === 0) {
          this.finished = true
        } else {
          this.timestamp = res.data.data.pre_timestamp
        }
      } catch (error) {
        console.log('请求失败', error)
        // 碰到错误后, 展示错误状态, 同时将loading改为非加载状态,再通过滚动条的位置来触发load事件
        this.error = true
        this.loading = false
      }
    }

    // onLoad () {
    //   // 当初始化或页面滚动到列表最底部或者请求回来的数据不足一屏的时候, 会自动的触发@load事件绑定的onLoad方法

    //   // 1. 异步更新数据 - 调用接口更新列表, 添加数组的后续元素
    //   // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    //   setTimeout(() => {
    //     // 2. 把请求结果数据放到list数组中
    //     for (let i = 0; i < 10; i++) {
    //       this.list.push(this.list.length + 1)
    //     }
    //     // 3. 本次数据加载结束之后要把加载状态设置为结束, loading关闭以后才能触发下一次的加载更多
    //     this.loading = false

    //     // 4. 判断数据是否全部加载完成
    //     if (this.list.length >= 40) {
    //       // 如果没有数据了, 把finish设置为true, 之后不会触发@load
    //       this.finished = true
    //     }
    //   }, 1000)
    // }
  }
}
</script>

<style lang="less" scoped>
.article-list-container {
  height: 79vh;
  overflow-y:auto ;
}
</style>
